<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../../dist/core.css">
  <script type="module">
    import '../../../dist/core.js';

    addEventListener('mpy-editor', async ({ target }) => {
      if (target.hasAttribute('setup')) {
        await target.process([
          'from pyscript import document',
          // adds class="a-1" to the <html> element
          'document.documentElement.classList.add(f"a-{a}")',
          'from js import console',
          'console.log("Hello JS")',
        ].join('\n'));
      }
    });
  </script>
</head>
<body>
  <!-- a setup node with a config for an env -->
  <script type="mpy-editor" src="task1.py" config="./config.toml" env="task1" setup></script>
  <script type="mpy-editor" env="task1">
    from pyscript.js_modules.html_escaper import escape, unescape
    print(unescape(escape("<OK>")))
    a = 1
  </script>
  <!-- a share-nothing micropython editor -->
  <script type="mpy-editor" config='{"js_modules":{"worker":{"https://cdn.jsdelivr.net/npm/html-escaper/+esm":"html_escaper"}}}'>
    from pyscript.js_modules.html_escaper import escape, unescape
    print(unescape(escape("<OK>")))
    b = 2
    try:
      print(a)
    except:
      print("all good")
  </script>
  <!-- a config once micropython env -->
  <script type="mpy-editor" env="task2" config="./config.toml">
    from pyscript.js_modules.html_escaper import escape, unescape
    print(unescape(escape("<OK>")))
    c = 3
    try:
      print(b)
    except:
      print("all good")
  </script>
  <script type="mpy-editor" env="task2">
    print(c)
  </script>
</body>
</html>
